<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>医疗管家</title>
    <meta name="description" content="医疗管家">
    <meta name="keywords" content="医疗管家">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
</head>
<body class="hold-transition">
<div id="app">
    <div class="content-header">
        <h1>预约管理<small>预约信息列表</small></h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>预约管理</el-breadcrumb-item>
            <el-breadcrumb-item>预约信息列表</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="app-container">
        <div class="box">
            <div class="filter-container">
                <el-col :span=16>
					<template>
					  <el-tabs v-model="activeName" @tab-click="handleClick">
					    <el-tab-pane label="全部" name="first">全部</el-tab-pane>
					    <el-tab-pane label="今天" name="second">今天</el-tab-pane>
					    <el-tab-pane label="本周" name="third">本周</el-tab-pane>
					    <el-tab-pane label="本月" name="fourth">本月</el-tab-pane>
					  </el-tabs>
					</template>
				</el-col>
              <el-col :span=8>
				  <el-input placeholder="预约时间/电话/会员名" v-model="queryString" style="width: 200px;" class="filter-item"></el-input>
				  <el-button @click="findPage()" class="dalfBut">查询</el-button>
			  </el-col>
				
			
            </div>
            <el-table size="small" current-row-key="id" :data="dataList" @selection-change="addid"
			 stripe highlight-current-row>
                <el-table-column type="selection" width="55" prop="id">
                	</el-table-column>
				<el-table-column type="index" align="center" label="序号"></el-table-column>
                <el-table-column prop="name" label="会员名" align="center"></el-table-column>
                <el-table-column prop="tel" label="电话" align="center"></el-table-column>
                <el-table-column prop="setmeal" label="套餐名" align="center"></el-table-column>
                <el-table-column prop="date" label="时间" align="center"></el-table-column>
			
				<el-table-column prop="status" label="状态" align="center">
						
				</el-table-column>
			
			
               
				<el-table-column label="操作" align="center">
				    <template slot-scope="scope">
						<p v-show="scope.row.status=='未到诊'">
							<el-button type="warning" size="mini" @click="update(scope.row)">待就诊</el-button>	
						</p>
						<p v-show="scope.row.status=='已到诊'">
							<el-button type="success" size="mini" @click="update(scope.row)" disabled>{{scope.row.status}}</el-button>	
						</p>
				    </template>
				</el-table-column>
				</el-table>
            </el-table>
            <div class="pagination-container">
                <el-pagination
                        class="pagiantion"
                        @current-change="handleCurrentChange"
                        :current-page="pagination.pageNum"
                        :page-size="pagination.pageSize"
                        layout="total, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>
           
        </div>
    </div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
    var vue = new Vue({
        el: '#app',
        data:{
			queryString:"",
            pagination: {//分页相关模型数据
                pageNum: 1,//当前页码
                pageSize:10,//每页显示的记录数
                name:'',
                tel:'',
                date:''
              
            },
			activeName: 'first',
			total:0,//总记录数
			delarr:[],
            dataList: [],//当前页要展示的分页列表数据
            formData: {},//表单数据
            dialogFormVisible: false,//增加表单是否可见
            dialogFormVisible4Edit:false,//编辑表单是否可见
            rules: {//校验规则
                code: [{ required: true, message: '项目编码为必填项', trigger: 'blur' }],
                name: [{ required: true, message: '项目名称为必填项', trigger: 'blur' }]
            }
        },
        //钩子函数，VUE对象初始化完成后自动执行
        created() {
            this.list();
        },
        methods: {
			//初始查询
			list(){
				axios.post(`http://localhost:9002/order/list?active=${this.activeName}`,this.pagination).then(res=>{
					if(res.data.flag){
						this.dataList=res.data.data;
						this.total=res.data.data2;
					}
				});
			
			},
			//切换页码显示分页信息
			handleCurrentChange(currentPage) {
            this.pagination.pageNum=currentPage;
			this.list();
			},
            //分页查询
            findPage() {
				this.pagination.name=this.queryString;
				this.pagination.date=this.queryString;
				this.pagination.tel=this.queryString;
               this.pagination.pageNum=1;
			   this.list()
            },
			//添加选中的ID
			addid(val){
						this.delarr=[];//每次选择清空数据
						for (var i = 0; i < val.length; i++) {
							let id=val[i].id;
							this.delarr.push(id);
							}
						},	
		
            //重置表单
            resetForm() {
                this.formData={}
            },
          handleClick(){
			 this.pagination.pageNum=1
			  this.list()
		  },
		  update(row){
		
			  axios.put(`http://localhost:9002/order/${row.id}`).then(res=>{
				  if(res.data.flag){
					  this.$message.success(res.data.message);
					  
					  this.list();
				  }else{
					  this.$message.error(res.data.message);
				  }
			  })
		  }
        }
    })
</script>
</html>